<template>
  <div class="app-container">
    <el-card class="" shadow="never">
      <!-- 小标题 -->
      <div class="title">搜索条件</div>
      <div class="search-wrap">
        <div class="item">
          <span class="label">申请时间：</span>
          <el-radio-group v-model="create_time">
            <el-radio label="1" border>全部</el-radio>
            <el-radio label="2" border>今天</el-radio>
            <el-radio label="3" border>昨天</el-radio>
            <!--            <el-radio label="4" border>近七天</el-radio>-->
            <el-radio label="5" border>自定义</el-radio>
          </el-radio-group>
          <el-date-picker
            v-show="create_time === '5'"
            v-model="datePicker"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </div>
        <div class="item">
          <span class="label">用户编号：</span>
          <el-input v-model="input" placeholder="请输入用户编号"></el-input>
        </div>
        <div class="item">
          <span class="label">申请状态：</span>
          <el-checkbox-group v-model="type">
            <el-checkbox label="待审批" border>待审批(8)</el-checkbox>
            <el-checkbox label="已通过" border>已通过(9)</el-checkbox>
            <el-checkbox label="未通过" border>未通过(0)</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </el-card>
    <el-card class="" shadow="never">
      <!-- 小标题 -->
      <div class="title">申请列表</div>
      <el-table
        :data="tableData"
        class="table"
        highlight-current-row
        stripe
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="date"
          label="订单编号">
        </el-table-column>
        <el-table-column
          prop="name"
          label="用户编号">
        </el-table-column>
        <el-table-column
          prop="name"
          label="用户昵称">
        </el-table-column>
        <el-table-column
          prop="date"
          label="申请时间">
        </el-table-column>
        <el-table-column
          prop="date"
          label="申请金额">
        </el-table-column>
        <el-table-column
          prop="date"
          label="状态">
        </el-table-column>
        <el-table-column
          prop="date"
          label="操作时间">
        </el-table-column>
        <el-table-column
          prop="date"
          label="备注">
        </el-table-column>
        <el-table-column label="操作" min-width="300px">
          <template slot-scope="{ row }">
            <el-button type="success" icon="el-icon-check" circle></el-button>
            <el-button type="danger" icon="el-icon-close" circle></el-button>
            <el-button type="primary" @click="remarkEvent">备注</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="pagination"
        background
        layout="total, sizes,prev, pager, next, jumper"
        :total="total"
        :page-size="pageSize"
        :page-sizes="[20, 50, 100]"
        :current-page="currentPage"
        @size-change="changePageSize"
        @current-change="changeCurrentPage"
      />
      <!-- 分页 -->
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'withdrawal',
    data() {
      return {
        tableData: [{
          date: '12313'
        }],
        type: []
      }
    },
    methods: {
      // 备注
      remarkEvent() {
        this.$prompt('请输入备注内容', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType: 'textarea'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '备注成功'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
    }
  }
</script>

<style scoped lang="sass">
  .search-wrap
    padding: 10px
    color: #606266
    width: 50%
    display: inline-block
    float: left

    .item
      margin: 10px 0

      .label
        width: 100px
        float: left
        line-height: 25px
        margin-bottom: 5px

      .el-radio, .el-checkbox
        margin-right: 5px

      .el-input
        width: 257px

    .statistic-wrap
      width: 50%
      color: #606266
      display: inline-block
      padding: 10px
      float: left
      .item
        display: flex
        margin-bottom: 10px
        .label
          width: 20%
          float: left
          line-height: 25px
          text-align: right
          padding-right: 20px
        .el-progress
          width: 60%
          float: left
        .action
          width: 20%
          margin-left: 10px
          float: left
        .el-progress-bar
          width: 90%
      .text-gray
        color: #a1a1a1
</style>
